<template>
  <div class="flex">
    <div class="w m-auto py-[24px] relative">
      <div class="text-[18px] font-[500] py-[8px]">
        {{ $t("title.购物车") }}({{ cartList.length }})
      </div>
      <template v-if="cartList && cartList.length > 0">
        <tableGoods
          ref="tableGoodsRef"
          v-model:productList="cartList"
          :allow-delete="true"
          @onUpdate="onUpdateProduct"
        ></tableGoods>
        <div
          class="sticky bg-white bottom-[0] py-4"
          style="box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 6px"
        >
          <div class="flex items-center">
            <div class="pl-3">
              <n-checkbox
                class="text-[18px] font-[300]"
                v-model:checked="selectAll"
                @update:checked="onSelectAll"
              >
                <div class="text-[18px] font-[300]">{{ $t("button.选择所有") }}</div>
              </n-checkbox>
            </div>
            <div class="ml-4" v-if="computedCount() > 0">
              <n-popconfirm
                @positive-click="delAll"
                :positive-text="$t('button.确定')"
                :negative-text="$t('button.取消')"
              >
                <template #trigger>
                  <n-button color="#4e4e4e" ghost round>
                    {{ $t("button.删除") }}
                  </n-button>
                </template>
                {{ $t("confirm.删除商品") }}
              </n-popconfirm>
            </div>
            <div class="flex-1 text-right text-[18px] font-[300] pr-10">
              <div>
                Se han seleccionado
                <span class="text-[--main-color] font-[400]">{{ computedCount() }}</span>
                elementos
              </div>
            </div>

            <div class="flex items-center gap-2 pr-[16px]">
              <span class="font-[300] text-[18px]">{{ $t("common.总价") }} ：</span>
              <money
                class="text-[--main-color]"
                :money="computedAmount()"
                :is-cny="false"
              ></money>

              <n-popover trigger="hover" placement="top">
                <template #trigger>
                  <n-icon class="text-[18px] cursor-pointer text-[--sub-color]">
                    <InformationCircleOutline></InformationCircleOutline>
                  </n-icon>
                </template>
                <div class="flex">{{ $t("tips.不含运费") }}</div>
              </n-popover>
            </div>
            <!-- <div>
              <div
                class="bg-[--main-color] text-[white] py-6 px-2"
                type="primary"
                @click="onClickGotoSubmitOrder"
              >
                {{ $t("button.现在购买") }}
              </div>
            </div> -->
            <div class="flex items-center w-[120px] justify-center">
              <n-popover
                trigger="manual"
                :show="showPopover"
                :width="400" 
                @clickoutside="showPopover = false"
              >
                <template #trigger>
                  <n-button
                    class=""
                    type="primary"
                    :loading="loading"
                    round
                    @click="onClickGotoSubmitOrder"
                  >
                    {{ $t("button.提交") }}
                  </n-button>
                </template>
                <span>{{ errorMsg }}</span>
              </n-popover>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div
          class="w-[700px] mx-auto text-center my-[110px] text-[22px] font-[400] text-[#2f2f2f] leading-[36px]"
        >
          {{ $t("tips.购物车为空") }}
          <div></div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getUserShoppingCartItems } from "@/api/cart";
import { useRouter } from "vue-router";
import { useMessage } from "naive-ui";
import { useI18n } from "vue-i18n";
import { useUser } from "@/stores/user";
import tableGoods from "@/components/tableGoods.vue";
import { InformationCircleOutline, CloseOutline } from "@vicons/ionicons5";
import money from "@/components/money.vue";
const { t } = useI18n();
const message = useMessage();
const tableGoodsRef = ref();
const selectAll = ref(false);
const showPopover = ref(false);
const loading = ref(false);
const errorMsg = ref("");

const router = useRouter();
const cartList = ref([]);
const { setSettlementGoods } = useUser();
const loadData = async () => {
  // const { data } = cart;
  //加载数据前 先获取已选择的商品
  let ids = cartList.value?.filter((x) => x.selected).map((x) => x.id);
  // console.log("%c Line:118 🍧 ids", "color:#93c0a4", ids);
  const { data } = await getUserShoppingCartItems();
  cartList.value = data.data;
  if (ids && ids.length > 0) {
    for (const item of cartList.value) {
      if (ids.includes(item.id)) {
        item.selected = true;
      }
    }
  }
};

loadData();

const onClickGotoSubmitOrder = async () => {
  const goods = cartList.value.filter((x) => x.selected);
  if (goods.length == 0) {
    showPopover.value = true;
    errorMsg.value = window.tt("tips.未选择结算商品");
    return;
  }
  //判断商品数量是否合法
  loading.value = true;
  let checked = await tableGoodsRef.value.checkSelected();
  if (!checked) {
    showPopover.value = !checked;
    loading.value = false;
    errorMsg.value = window.tt("tips.数量不符合设置");
    // console.log("%c Line:410 🍋", "color:#33a5ff", "存在错误22222");
    return;
  }
  setSettlementGoods(goods);
  router.push("/submitOrder");
};

const onUpdateProduct = async () => {
  loadData();
};

const computedCount = () => {
  return cartList.value.filter((x) => x.selected).length;
};
const computedAmount = () => {
  return cartList.value.reduce((total, item) => {
    return total + (item.selected ? item.price * item.quantity : 0);
  }, 0);
};

const onSelectAll = (value) => {
  tableGoodsRef.value.onSelectAll(value);
};

const delAll = async () => {
  tableGoodsRef.value.delSelected();
};
</script>

<style lang="scss" scoped>
.select-wrapper {
  .n-checkbox {
    align-items: center;
  }
}

.table-wrapper {
  thead {
    th {
      background-color: var(--sub-color);
      color: white;
      text-align: center;
      height: 32px;
      padding: 0;
    }
  }
  .selected {
    td {
      background-color: #fffbf6;
    }
  }
}
</style>
